<template>
  <div class="banner">
    <img class="banner1" src="~/static/img/banner_3.png" alt="" />

    <div class="bannerlist">
      <div class="top">
        <h3>{{ bannerlist[num].title1 }}</h3>
        <p>{{ bannerlist[num].title2 }}</p>
        <p>{{ bannerlist[num].title3 }}</p>
      </div>
      <img :src="require(`~/static/img/banner${num}.png`)" alt="" />
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      timer: null,
      num: 0, //当前轮播图的序列号
      bannerlist: [
        {
          title1: "今日影视最佳推荐",
          title2: "猪脚：吴亦凡，五选一",
          title3: "关键词 ： 动作，误解，强",
        },
        {
          title1: "今日小说最佳推荐",
          title2: "猪脚：遮天，五选一",
          title3: "关键词 ： 动作，误解，强",
        },
        {
          title1: "今日音乐最佳推荐",
          title2: "猪脚：吴亦凡，五选一",
          title3: "关键词 ： 动作，误解，强",
        },
      ],
    };
  },

  mounted() {
    this.goBanner();
  },
  methods: {
    goBanner() {
        this.timer=setInterval(() => {
            if(this.num>=this.bannerlist.length-1){
                this.num=0
                
            }else{
                this.num=this.num+1
            }
         
        }, 10000);
    },
  },
  beforeDestroy(){
      this.timer=null
  },

};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  height: 722px;
  position: relative;
  overflow: hidden;
  .banner1 {
    position: absolute;
    top: 200px;
    height: 722px;
    animation: a1 10s linear infinite alternate;
  }

  .bannerlist {
    // border: 1px solid #000;
    width: 910px;
    height: 648px;
    position: absolute;
    top: 74px;
    left: 50%;
    transform: translate(-50%, 0);
    .top {
      position: absolute;
      top: 40px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: a2 10s linear alternate infinite;
      h3 {
        font-size: 50px;
        font-weight: 400;
        color: #fff;
      }

      p {
        font-size: 20px;
        font-weight: 400;
        margin-top: 5px;
        color: #fff;
      }
    }

    img {
      position: absolute;
      bottom: 0;
      width: 910px;
      height: 410px;
      animation: a3 10s linear alternate infinite;
    }
  }
}

@keyframes a3 {
  0% {
    bottom: -410px;
    opacity: 0;
  }
  10% {
    bottom: 0px;
    opacity: 1;
  }
  90% {
    bottom: 0px;
    opacity: 1;
  }
  100% {
    bottom: -410px;
    opacity: 0;
  }
}

@keyframes a2 {
  0% {
    top: -40px;
    opacity: 0;
  }
  10% {
    top: 40px;
    opacity: 1;
  }
  90% {
    top: 40px;
    opacity: 1;
  }
  100% {
    top: -40px;
    opacity: 0;
  }
}

@keyframes a1 {
  0% {
    transform: translate(-5px, 0);
  }
  50% {
    transform: translate(5px, 0);
  }

  100% {
    transform: translate(-5px, 0);
  }
}
</style>>

